<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="text">订单编码</view>
			<view class="sarch">
				<u-search :showAction="false" placeholder="搜索订单编码" shape="square" v-model="fromData.no" @search="refresh({
					page: 1
				})" style="width: 100%;"></u-search>
			</view>
			<view style="white-space: nowrap;color: rgba(3, 185, 209, 1);" @click="renew()">更新</view>
		</view>
		<view class="category">
			<view class="goodsBox">
				<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
					<view class="goods">
						<view class="goods-item" v-for="item in goodsData" :key="item.id">
							<view class="goods-item-header">
								<view style="font-size: 24rpx;color: rgba(37, 38, 38, 1);">订单编号：{{item.no}}</view>
								<view style="font-size: 24rpx;color: rgba(145, 145, 145, 1);">已完成</view>
							</view>
							<view class="line"></view>
							<view class="tupian" v-for="(val, index ) in item.imgs" :key="index">
								<u--image :src="val" width="120rpx" height="120rpx"
									style="display: inline-block;margin-right: 20rpx;"></u--image>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view class="goods-box">
									<view class="goods-item-text">订单日期：{{item.create_time}}</view>
									<view class="box-let">
										<view class="box-let-text">种类：<span
												style="color: rgba(3, 185, 209, 1);">{{item.total_kind}}</span>
										</view>
										<view class="box-let-text">数量：<span
												style="color: rgba(3, 185, 209, 1);">{{item.total_num}}</span>
										</view>
										<view class="box-let-total">总计：<span
												style="color: rgba(3, 185, 209, 1);">￥{{item.total_price}}</span>
										</view>
									</view>
								</view>
								<view class="goods-right">
									<view class="button" @click="Jump(item.id)">订单详情</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-list>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		orderList
	} from "@/api/home.js"
	export default {
		data() {
			return {
				goodsData: [],
				option: {
					page: 1,
					limit: 10,
					auto: false,
					height: null
				},
				fromData: {
					page: 1,
					limit: 10,
					no: ''
				}
			}
		},
		onShow() {
			this.goodsData = []
			this.refresh({
				page: 1
			})
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.goodsBox').boundingClientRect(data => {
				this.option.height = data.height
			}).exec();
		},
		methods: {
			Jump(id) {
				uni.navigateTo({
					url: '/pages/order/details?id=' + id
				});
			},
			renew() {
				this.fromData.no = ""
				this.goodsData = []
				this.search()
			},
			load(paging) {
				this.fromData.page = paging.page
				this.search()
			},
			refresh(paging) {
				this.fromData.page = paging.page
				let params = {
					...this.fromData
				}
				orderList(params)
					.then(res => {
						let list = [...res.data.list]
						this.goodsData = [...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.refreshSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.refreshFail()
					})
			},
			search() {
				let params = {
					...this.fromData
				}
				orderList(params)
					.then(res => {
						let list = [...res.data.list]
						this.goodsData = [...this.goodsData, ...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.loadSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.loadFail()
					})
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;

		.user_info_wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30rpx;
			width: 100%;
			height: 178rpx;
			padding: 60rpx 30rpx;
			font-size: 32rpx;
			box-sizing: border-box;

			.text {
				font-size: 32rpx;
				font-weight: 400;
				white-space: nowrap;
				color: rgba(37, 38, 38, 1);
			}

			.sarch {
				flex: auto;
			}
		}

		.category {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: rgba(245, 242, 242, 1);

			.goodsBox {
				width: 100%;
				height: calc(100vh - 350rpx);
				overflow-y: scroll;

				.goods {
					.goods-item {
						width: 692rpx;
						// height: 392rpx;
						border-radius: 20rpx;
						padding: 30rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 1);
						margin-bottom: 30rpx;

						.goods-item-header {
							display: flex;
							justify-content: space-between;
						}

						.line {
							height: 2rpx;
							background: rgba(0, 0, 0, 0.05);
							margin: 20rpx 0rpx;
						}

						.tupian {
							display: inline-block;
							width: 120rpx;
							height: 120rpx;
							margin-right: 30rpx;
						}

						.goods-box {
							width: 68%;
							display: inline-block;

							.goods-item-text {
								margin: 15rpx 0rpx;
								font-size: 20rpx;
								font-weight: 500;
								color: rgba(102, 102, 102, 1);
							}

							.box-let {
								.box-let-text {
									display: inline-block;
									margin-right: 20rpx;
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(102, 102, 102, 1);
								}

								.box-let-total {
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(102, 102, 102, 1);
									margin-top: 10rpx;
								}
							}
						}

						.goods-right {
							width: 32%;
							display: inline-block;
							margin-top: 70rpx;

							.button {
								width: 198rpx;
								height: 70rpx;
								border-radius: 554rpx;
								border: 2rpx solid rgba(3, 185, 209, 1);
								font-size: 28rpx;
								font-weight: 500;
								text-align: center;
								line-height: 70rpx;
								color: rgba(3, 185, 209, 1);
							}
						}
					}
				}
			}
		}
	}
</style>